CSS Loader
You can create a loader using CSS by taking advantage of keyframe animations.
Example-
Here is a basic example to demonstrate the loader using CSS,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Loader Example</title>
<style>
/* styling for loader */
.loader {
border: 4px solid rgba(0, 0, 0, 0.1);
border-left: 4px solid #333;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: auto;
}
/* styling for roated the loader */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Center the heading */
.headting-text{
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="headting-text">
<h1>Here are creating a loader using CSS</h1>
</div>
<div class="loader"></div>
</body>
</html>In the above example
- We create a
<div>element with a class called "loader" to represent the loader. - We use CSS to style the loader, set its boundaries, border-radius, width and height to create a circle.
- To further rotate the loader, we use the "spin" keyframe animation. The animation rotates the loader endlessly from 0 degrees to 360 degrees for 1 second.
- The
margin: auto;The property centers the loader directly in its container.
Output-
You can further customize the loader by customizing CSS preferences such as size, color, animation duration, and facilitation functions to suit your design needs. Additionally, you can add different shapes or animation effects to create different style loaders.
Also, Read: How to implement the List group using CSS3 and HTML?
Leave Comment